* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  --theme: #ec9b64;
  --theme-o9: #ec9a64d8;
  --theme-o2: #ec9a6434;
  --theme-o1: #ed9c6618;
  --theme-gray: #e6dcd7;
}

.views-main {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  
  &::before {
    content: "";
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/common_bg.jpg) no-repeat;
    // background-color: #ec846433;
    background-size:cover;
    // background-size: 100% auto;
    background-position: center;
    // backdrop-filter: blur(100px);
    // -webkit-backdrop-filter: blur(100px);
    // filter: blur(2px);
  }
}

.btn-1 {
  background: var(--theme);
  height: 30px;
  padding: 0 8px;
  margin: 0 8px;
  box-sizing: border-box;
  line-height: 30px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.global-msg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  z-index: 9999;
  justify-content: center;
  align-items: center;
  div {
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 15px 5px #7a7a7a3b;
    position: absolute;
    height: 50px;
    img {
      height: 24px;
      width: 24px;
      margin-right: 12px;
    }
    p {
      font-size: 16px;
      color: #3b3b3b;
      line-height: 16px;
    }
  }
}

.menu-page {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  position: absolute;
}